<template>
  <div class="app">
    <el-container class="el-container">
      <el-header>
        <Bread :fromFather="dataPath"></Bread>
        <div
          :title="isCollapse ? '点击展开' : '点击收起'"
          class="box_bgd"
          @click="isC"
        >
          <!-- 点击展开收起导航和切换对应图标 -->
          <i :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
        </div>
      </el-header>
      <el-container>
        <el-aside class="el-aside" width="collapse">
          <el-scrollbar>
            <!-- <h5 class="name">系统名称</h5> -->
            <!-- <div class="name">2</div> -->

            <el-menu
              router
              :default-active="$route.path"
              :collapse="isCollapse"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span class="el-submenuone">导航一</span>
                </template>

                <el-menu-item-group>
                  <el-menu-item index="train">选项1</el-menu-item>
                  <el-menu-item index="/onesecondone">选项2</el-menu-item>
                  <el-menu-item index="/onesecond">选项3</el-menu-item>
                  <el-menu-item index="/fath">选项4</el-menu-item>

                  <el-submenu index="1-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="/onefirst" class="bottom"
                      >选项1</el-menu-item
                    >
                  </el-submenu>

                  <el-submenu index="1-5">
                    <template slot="title">选项5</template>
                    <el-menu-item index="newtry" class="bottom"
                      >选项1</el-menu-item
                    >
                  </el-submenu>

                  <el-submenu index="1-6">
                    <template slot="title">选项6</template>
                    <el-menu-item index="cssceshi" class="bottom"
                      >选项1</el-menu-item
                    >
                  </el-submenu>
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item index="one1">
                <i class="el-icon-menu"></i>
                <span slot="title">导航二</span>
              </el-menu-item>
              <el-menu-item index="3">
                <i class="el-icon-document"></i>
                <span slot="title">导航三</span>
              </el-menu-item>
              <el-menu-item index="newcss">
                <i class="el-icon-setting"></i>
                <span slot="title">柱状图点击事件</span>
              </el-menu-item>
              <el-menu-item index="swiper">
                <i class="el-icon-setting"></i>
                <span slot="title">轮播图</span>
              </el-menu-item>
              <el-menu-item index="qiehuan">
                <i class="el-icon-setting"></i>
                <span slot="title">白天黑夜模式切换</span>
              </el-menu-item>
              <el-menu-item index="newcss1">
                <i class="el-icon-setting"></i>
                <span slot="title">滚动条添加</span>
              </el-menu-item>
              <el-menu-item index="qianzidaochu">
                <i class="el-icon-setting"></i>
                <span slot="title">签字导出图片下载</span>
              </el-menu-item>
              <el-menu-item index="jieping">
                <i class="el-icon-setting"></i>
                <span slot="title">截屏</span>
              </el-menu-item>
              <el-menu-item index="tupianfangda">
                <i class="el-icon-setting"></i>
                <span slot="title">图片放大缩小</span>
              </el-menu-item>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Bread from "@/components/Bread.vue"; // 引入面包屑组件

export default {
  name: "App",
  components: {
    Bread,
  },
  props: {
    dataPath: "",
  },
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    isC() {
      this.isCollapse = !this.isCollapse;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
/*铺满屏幕，没有边距*/
.el-container {
  padding: 0px;
  margin: 0px;
  // height: 100wh;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}
/* 隐藏横向滚动条 */
.page-scroll {
  height: 100%;
}
.page-scroll .el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-aside::-webkit-scrollbar {
  display: none;
}
.el-header {
  background-color: #2d3a4b;
  color: #333;
  // line-height: 60px;
  height: 8vh !important;
}

.el-aside {
  // width: 12vw;
  // height: 100vh;
  height: 93vh;
}

// .el-menu-item-group__title {
//   padding-top: -1px !important;
//   padding-bottom: -1px !important;
// }
// 隐藏侧边栏滚动条
.el-menu {
  border: 0 !important;
}
// 侧边栏高度撑满
// .el-menu-vertical-demo {
//   height: 93.5vh;
// }
// 隐藏小箭头
::v-deep.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
::v-deep.el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  // height: 9.5vh !important;
  /* line-height: 60px; */
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  //  line-height: 200px;
}

.el-main {
  // background-color: #e9eef3;
  color: #333;
  // height: 90.5vh;
}
::v-deep.el-menu-item-group__title{
  padding: -1px 0 0px 0px !important; z-index: 101;
}

</style>
